<template>
  <div class="large-screen">
    <div class="time-around">{{ newTime }}</div>
    <img src="@/assets/large/dabiaoti@3x.png">
    <div class="person-stat">
      <div v-for="(item,index) of countList" :key="index" class="person-around">
        <div class="person-text">{{ item.title }}</div>
        <Count :count="item.count"/>
        <div class="person-text">人</div>
      </div>
    </div>
    <div class="table-around">
      <div class="left-table">
        <div v-if="largeList.diseases && largeList.diseases.length === 0" style="color: #F5F5F5;font-size: 30px">暂无内容
        </div>
        <div id="sickChart" class="sick-chart" v-else/>
        <div class="sick-text" v-if="largeList.diseases && largeList.diseases.length !== 0">
          <div class="sick-type" v-for="item of largeList.diseases">
            <span class="sick-name">{{ item.name }}</span>
            <span>
              <span class="num-num" style="color:#1569BD;">{{ item.disease_num }}</span>
              <span class="num-text">人</span>
            </span>
          </div>
        </div>
      </div>
      <div class="main-table">
        <div class="main-top">
          <div id="leavelTake" style="width: 850px;height: 400px"/>
        </div>
        <div class="main-button">
          <div class="mb-left">
            <div id="sickNum" style="width: 100%;height: 260px"></div>
          </div>
          <div class="mb-right">
            <div class="mbr-top">
              <div class="mbrt-top">
                <div class="sign-rtop"></div>
                <div>非传染类</div>
              </div>
              <div class="mbrt-top">
                <div class="sign-rtop" style="background-image: linear-gradient(#F1312E,#EB3EA7)"></div>
                <div>传染类</div>
              </div>
            </div>
            <div class="mbr-bottom">
              <div class="mbrb-main">
                <div style="color:rgba(255,255,255,0.7)">本周非传染类型</div>
                <div>
                  <span style="font-size: 35px">{{ largeList.disease_total && largeList.disease_total.no_ask_num }}</span>
                  <span>人</span>
                </div>
              </div>
              <div class="mbrb-main">
                <div style="color: rgba(255,255,255,0.7)">本周传染类型</div>
                <div>
                  <span style="font-size: 35px">{{ largeList.disease_total && largeList.disease_total.ask_num }}</span>
                  <span>人</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right-table">
        <div class="right-top">
          <div id="parNum" style="height: 350px;width: 400px"></div>
        </div>
        <div class="right-button">
          <div style="display: flex;align-items: center">
            <div class="rb-class">
              <div style="width: 150px;height: 180px" id="sex"></div>
              <div>
                <span class="rc-num">{{ largeList.male_to_female_total && largeList.male_to_female_total.woman.total}}</span>
                <span class="rc-text">人</span>
              </div>
            </div>
            <div class="rb-class">
              <div style="width: 150px;height: 180px" id="sexNan"></div>
              <div>
                <span class="rc-num">{{ largeList.male_to_female_total && largeList.male_to_female_total.man.total }}</span>
                <span class="rc-text">人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Count from '@/components/largeCount'
import * as echarts from 'echarts'
import {leavel, leaveltake, sick} from '@/utils/chartsList'
import dayjs from "dayjs";
import {get} from "@/utils/request";

export default {
  name: 'LargeScreen',
  components: {
    Count
  },
  data() {
    return {
      largeList: {},
      newTime: '',
      countList: [
        {title: '应到校', count: '0'},
        {title: '未到校', count: '20'},
        {title: '实际到校', count: '2800'}
      ]
    }
  },
  mounted() {
    this.handleGetTime()
    this.handleGetChartsPage()
  },
  methods: {
    handleGetChartsPage() {
      get('api/userPortal/dpIndex/index', {
        school_id: 1
      }).then((res) => {
        this.largeList = res.data
        this.sickTypeList = res.data.diseases.map((item) => {
          return {value: item.disease_num, name: item.name + +item.proportion * 100 + '%'}
        })
        const attend_school_student_num = this.largeList.attend_school_student_num + ''
        const not_attend_school_student_num = this.largeList.not_attend_school_student_num + ''
        const actual_attend_school_student_num = this.largeList.actual_attend_school_student_num + ''
        this.countList = [
          {title: '应到校', count: attend_school_student_num.padStart(4, '0')},
          {title: '未到校', count: not_attend_school_student_num.padStart(4, '0')},
          {title: '实际到校', count: actual_attend_school_student_num.padStart(4, '0')}
        ]
        this.handleGetCharts()
      })
    },
    handleGetTime() {
      const dayjs = require('dayjs')
      const time = new Date()
      const customParseFormat = require('dayjs/plugin/customParseFormat')
      dayjs.extend(customParseFormat)
      require('dayjs/locale/zh-cn')
      setInterval(() => {
        const week = ['日', '一', '二', '三', '四', '五', '六'][dayjs().day()]
        this.newTime = dayjs().format('YYYY年MM月DD日HH:mm:ss' + '  ' + '  星期' + week)
      }, 1000)
    },
    handleGetCharts() {
      // 基于准备好的dom，初始化echarts实例
      if (this.largeList.diseases.length !== 0) {
        const myChart = echarts.init(document.getElementById('sickChart'))
        const sick = {
          tooltip: {
            trigger: 'item',
          },
          label: {
            show: true,
            fontSize: 16,
            color: 'rgba(255,255,255,0.7)'
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: true,
              label: {
                show: true,
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  color: 'rgba(255,255,255,0.7)'
                }
              },
              labelLine: {
                show: true
              },
              data: this.sickTypeList
            }
          ]
        }
        myChart.setOption({
          ...sick
        })
      }
      const sexChart = echarts.init(document.getElementById('sex'))
      const sexChartNan = echarts.init(document.getElementById('sexNan'))
      const sickNum = echarts.init(document.getElementById('sickNum'))
      const parNum = echarts.init(document.getElementById('parNum'))
      const leavelTake = echarts.init(document.getElementById('leavelTake'))
      const sexNan = {
        color: ['#1982DF'],
        series: [{
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#1982DF'
            }
          },
          axisLine: {
            lineStyle: {
              width: 10,
              color: [
                [1, 'rgba(25,130,223,0.6)']
              ]
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: [{
            value: Math.round((this.largeList.male_to_female_total.man.proportion * 100 + Number.EPSILON) * 100) / 100,
            name: '男',
            title: {
              offsetCenter: ['0%', '15%']
            },
            detail: {
              offsetCenter: ['0%', '-15%']
            }
          },
          ],
          title: {
            fontSize: 14,
            color: 'rgba(255,255,255,0.7)'
          },
          detail: {
            width: 300,
            height: 140,
            fontSize: 18,
            color: 'rgba(255,255,255,0.7)',
            borderColor: 'rgba(255,255,255,0.7)',
            formatter: '{value}%'
          }
        }]
      }
      const parnum = {
        color: ['#5AE2FD'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          axisLine: {
            show: true
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ['rgba(110,112,121)']
            }
          },
          type: 'value',
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          splitLine: {
            show: false,
            lineStyle: {
              color: ['rgba(110,112,121)']
            }
          },
          type: 'category',
          data: ['周日', '周六', '周五', '周四', '周三', '周二', '周一'],
        },
        series: [
          {
            barWidth: 10,
            type: 'bar',
            data: this.largeList.into_the_school.reverse(),
            label: {
              textStyle: {
                fontSize: 16,
                color: 'rgba(255,255,255,0.7)'
              },
              show: true,
              position: 'right',
              valueAnimation: true
            }
          },
        ]
      }
      const sex = {
        color: ['#DA005E'],
        axisPointer: [
          {
            shadowStyle: {
              color: 'rgba(210,219,238,0.2)'
            }
          }
        ],
        series: [{
          type: 'gauge',
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
            itemStyle: {
              borderWidth: 1,
              borderColor: '#DA005E'
            }
          },
          axisLine: {
            lineStyle: {
              width: 10,
              color: [
                [1, 'rgba(218,0,94,0.6)',]
              ]
            }
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
            distance: 50
          },
          data: [{
            value: Math.round((this.largeList.male_to_female_total.woman.proportion * 100 + Number.EPSILON) * 100) / 100,
            name: '女',
            title: {
              offsetCenter: ['0%', '15%']
            },
            detail: {
              offsetCenter: ['0%', '-15%']
            }
          },
          ],
          title: {
            fontSize: 14,
            color: 'rgba(255,255,255,0.7)',
          },
          detail: {
            width: 300,
            height: 140,
            fontSize: 18,
            color: 'rgba(255,255,255,0.7)',
            borderColor: 'rgba(218,0,94,0.6)',
            formatter: '{value}%'
          }
        }]
      }
      const leaveltake = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['事假', '病假'],
          textStyle: {
            color: ['#ffffff']
          }
        },
        xAxis: {
          splitLine: {
            show: false,
            lineStyle: {
              color: ['rgba(110,112,121)']
            }
          },
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          axisLine: {
            show: true
          },
          splitLine: {
            show: false,
          },
          type: 'value'
        },
        series: [{
          name: '事假',
          label: {
            textStyle: {
              fontSize: 16,
              color: 'rgba(255,255,255,0.7)'
            },
            show: true,
            position: 'top',
            valueAnimation: true
          },
          data: this.largeList.ask_for_leave_reason.personal_leave,
          type: 'line',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#033e8f'},
                // {offset: 0.7, color: '#033e8f'},
                {offset: 1, color: 'rgba(0,0,0,0)'}
              ]
            )
          },
          smooth: true
        }, {
          label: {
            textStyle: {
              fontSize: 16,
              color: 'rgba(255,255,255,0.7)'
            },
            show: true,
            position: 'top',
            valueAnimation: true
          },
          name: '病假',
          data: this.largeList.ask_for_leave_reason.sick_leave,
          type: 'line',
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#054771'},
                // {offset: 0.7, color: '#054771'},
                {offset: 1, color: 'rgba(0,0,0,0)'}
              ]
            )
          },
          smooth: true
        }]
      }
      const sicknum = {
        color: ['#26DAED', '#F2312C'],
        xAxis: [
          {
            splitLine: {
              show: false,
              lineStyle: {
                color: ['rgba(110,112,121)']
              }
            },
            type: 'category',
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: {
          axisLine: {
            show: true
          },
          splitLine: {
            show: false
          },
          type: 'value'
        },
        series: [{
          label: {
            textStyle: {
              fontSize: 16,
              color: 'rgba(255,255,255,0.7)'
            },
            show: true,
            position: 'top',
            valueAnimation: true
          },
          data: this.largeList.disease_total.no_ask,
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#26DAED'},
                {offset: 0.5, color: '#2DA8F9'},
                {offset: 1, color: '#2DA8F9'}
              ]
            )
          },
        }, {
          label: {
            textStyle: {
              fontSize: 16,
              color: 'rgba(255,255,255,0.7)'
            },
            show: true,
            position: 'top',
            valueAnimation: true
          },
          data: this.largeList.disease_total.ask,
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#F2312C'},
                {offset: 0.5, color: '#EB3FA9'},
                {offset: 1, color: '#EB3FA9'}
              ]
            )
          },
        }]
      }
      // 绘制图表
      sexChart.setOption({
        ...sex
      })
      leavelTake.setOption({
        ...leaveltake
      })
      parNum.setOption({
        ...parnum
      })
      sickNum.setOption({
        ...sicknum
      })
      sexChartNan.setOption({
        ...sexNan
      })
    }
  }
}
</script>

<style scoped lang="scss">
.time-around {
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.7);
}

.large-screen {
  padding: 0 20px;
  background-color: #020111;
  min-width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.person-stat {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 20px;
  height: 124px;
  color: #1D98FD;
}

.table-around {
  display: flex;
  justify-content: space-between;
  min-height: 100%;
}

.person-text {
  font-size: 20px;
  color: #1D98FD;
}

.left-table {
  justify-content: space-around;
  padding: 55px;
  width: 26%;
  height: 834px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url('../assets/large/bingjia@3x.png') no-repeat;
  background-size: 100% 100%;
}

.sick-chart {
  width: 400px;
  height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sick-text {
  padding-left: 16px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  width: 350px;
  height: 350px;
  background-color: rgba(41, 38, 177, 0.3);
  border: rgba(255, 255, 255, 0.3) 1px solid;
}

.sick-type {
  margin-right: 16px;
  width: 65px;
  justify-content: center;
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: column;
}

.sick-name {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.sick-num {
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: flex-end;
}

.num-num {
  font-size: 40px;
}

.num-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.person-around {
  display: flex;
  align-items: center;
}

.main-table {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 48%;
}

.main-top {
  width: 100%;
  height: 485px;
  padding-top: 70px;
  display: flex;
  justify-content: center;
  background: url('../assets/large/qingjia@3x.png') no-repeat;
  background-size: 100% 100%;
}

.main-button {
  padding: 70px 50px 50px 25px;
  width: 100%;
  height: 328px;
  display: flex;
  background: url('../assets/large/bingqing@3x.png') no-repeat;
  background-size: 100% 100%;
}

.mbr-bottom {
  padding: 25px 0;
  display: flex;
  justify-content: space-around;
  color: #187AD5;
  border: rgba(255, 255, 255, 0.3) 1px solid;
  height: 170px;
  background-color: rgba(41, 38, 177, 0.3);
}

.mbrb-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-right: dashed 2px rgba(255, 255, 255, 0.3);
  justify-content: space-around;
  align-items: center;
}

:last-child {
  border: none;
}

.mb-left {
  width: 60%;
}

.mb-right {
  width: 48%;
}

.mbrt-top {
  display: flex;
  align-items: center;
}

.sign-rtop {
  width: 17px;
  height: 9px;
  margin-right: 10px;
  background-image: linear-gradient(#26D9ED, #2CA8F8);
}

.mbr-top {
  display: flex;
  justify-content: space-around;
  color:  rgba(255,255,255,0.7);
  font-size: 16px;
  padding: 0 15px 10px 10px;
}

.right-table {
  width: 24%;
  height: 834px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.right-top {
  padding: 40px 20px 20px 20px;
  width: 100%;
  height: 413px;
  background: url('../assets/large/jiazhang@3x.png') no-repeat;
  background-size: 100% 100%;
}

.right-button {
  flex-direction: column;
  display: flex;
  align-items: center;
  padding: 120px 0;
  width: 100%;
  height: 401px;
  background: url('../assets/large/nannv@3x.png') no-repeat;
  background-size: 100% 100%;
}

.rb-class {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rb-text {
  color: #1D98FD;
  display: flex;
  align-items: flex-end;
}

.rc-num {
  font-size: 30px;
  color: #01DACE;
}

.rc-text {
  font-size: 14px;
  color: rgba(1, 218, 206, 0.7);
}
</style>
